<template>
    <div class="exam-review">
        <el-card>
            <div style="margin-bottom: 12px; display:flex; gap:8px; align-items:center">
                <el-input v-model="filters.paper_id" placeholder="试卷ID" style="width:140px" />
                <el-input v-model="filters.user_id" placeholder="用户ID" style="width:140px" />
                <el-button type="primary" @click="getList">搜索</el-button>
                <el-button @click="resetFilters">重置</el-button>
            </div>
            <el-table :data="list" style="width: 100%">
                <el-table-column prop="id" label="答卷ID" width="120" />
                <el-table-column prop="paper_id" label="试卷ID" width="120" />
                <el-table-column prop="user_id" label="用户ID" width="120" />
                <el-table-column prop="score" label="总分" width="100" />
                <el-table-column prop="status" label="状态" width="100">
                    <template #default="{ row }">{{ row.status == 1 ? '已完成' : '进行中' }}</template>
                </el-table-column>
                <el-table-column prop="start_time" label="开始时间" width="180" />
                <el-table-column label="操作" width="180">
                    <template #default="scope">
                        <el-button size="small" @click="openDetail(scope.row.id)">批阅该卷</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <el-dialog v-model="showDetail" title="批阅详情" width="900px">
            <div v-if="answers.length">
                <div v-for="a in answers" :key="a.answer.id" style="margin-bottom: 12px">
                    <div><b>题目：</b> {{ a.question.content }}</div>
                    <div><b>答案：</b> {{ a.answer.answer }}</div>
                    <div><b>标准答案：</b> {{ a.question.answer }}</div>
                    <div style="margin-top: 6px">
                        <el-input-number v-model="scores[a.answer.id]" :min="0" :max="a.question ? a.question.score : undefined" />
                    </div>
                </div>
                <div style="margin-top: 12px">
                    <el-button type="primary" @click="save">保存评分</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import request from '/@/utils/request'
import { ElMessage } from 'element-plus'

const list = ref([])
const showDetail = ref(false)
const answers = ref([])
const scores = reactive({})
const filters = reactive({ paper_id: '', user_id: '' })

function getList() {
    const params = {}
    if (filters.paper_id) params.paper_id = filters.paper_id
    if (filters.user_id) params.user_id = filters.user_id
    request.get('/admin/examReview/index', params).then((res) => {
        if (res.code === 1) list.value = res.data
    })
}

function openDetail(userPaperId) {
    // if filters.user_id is filled and no userPaperId passed, use user_id
    const params = {}
    if (userPaperId) params.user_paper_id = userPaperId
    else if (filters.user_id) params.user_id = filters.user_id
    request.get('/admin/examReview/detail', params).then((res) => {
        if (res.code === 1) {
            answers.value = res.data.answers
            showDetail.value = true
            // reset reactive scores object
            Object.keys(scores).forEach((k) => delete scores[k])
            answers.value.forEach((a) => {
                scores[a.answer.id] = a.answer.score || 0
            })
        }
    })
}

function resetFilters() {
    filters.paper_id = ''
    filters.user_id = ''
    getList()
}

function save() {
    const payload = Object.keys(scores).map((id) => ({ answer_id: id, score: scores[id] }))
    request.post('/admin/examReview/save', { scores: payload }).then((res) => {
        if (res.code === 1) {
            ElMessage.success(res.msg)
            showDetail.value = false
            getList()
        } else {
            ElMessage.error(res.msg)
        }
    })
}

onMounted(getList)
</script>

<style scoped>
.exam-review {
    max-width: 1000px;
    margin: 0 auto;
}
</style>
